import React from 'react'
import {inject, observer} from 'mobx-react';
import {toJS} from 'mobx';
import {Popover,Tools,SearchBar,Icon,List,Flex } from 'weaver-mobile';
import {Route, withRouter } from 'react-router-dom';
import { RouteLayout } from 'weaver-mobile-page';
import AdvancedForm from './AdvancedForm';
const getLabel = Tools.getLabel;
const tweenFunctions = require('tween-functions');

// const isIPhone = new RegExp('\\biPhone\\b|\\biPod\\b', 'i').test(window.navigator.userAgent);
// let wrapProps;
// if (isIPhone) {
//     wrapProps = {
//         onTouchStart: e => e.preventDefault(),
//     };
// }


@withRouter
@inject ('rememberStore')
@observer
class Remember extends React.Component {
    constructor(props){
        super(props);
        // this.state = {
        //     modal1: false,
        // };

        const {rememberStore} = this.props;
        const {getBaseRoute} = rememberStore;

        
        //获取基础路由
        getBaseRoute(this)
    }

    static defaultProps = {
        prefixCls:"fna-remember"
    }

    componentDidMount() {
        const {rememberStore} = this.props;
        const {initData} = rememberStore;
        initData();
        
    }

    render() {
        const { rememberStore,prefixCls } = this.props;
        const { routeData,costTypeList } = rememberStore;

        return (
            <div className={`${prefixCls}`}>
                <SearchBar
                    className="search-select"
                    placeholder="请输入费用类型名称"
                    showExtraButton={false}
                    extraButton={[
                        { key: 'advanced', show: <Icon key="filter-o" type="filter-o" /> },
                    ]}
                />

                    <div className={'multi-col-layouts'}>
                        <Flex className={`fna-flex-icon fna-flex-icon-03 fna-remeber-flex-icon`}>
                            {costTypeList.map( item => {
                                // console.log('item',item)
                                return (
                                    <Flex.Item className={`fna-flex-icon-item`} key={item.key} style={JSON.parse(item.itemStyle)} onClick={()=>{this.toAdvanced(item.key)}}>
                                        <div className={`fna-flex-icon-item-icon`} style={JSON.parse(item.item_icon_style)}><Icon type={item.icon} /></div>
                                        <div className={`fna-flex-icon-item-text`} style={JSON.parse(item.item_text_style)}>{item.title}</div>
                                    </Flex.Item>
                            )})}  
                        </Flex>
                    </div>



                {/* 路由层 */}
                <Route
                    key={routeData.id}
                    path={routeData.path}
                    render={() => {
                        return (
                            <RouteLayout getContainer={() => document.getElementById("root")}>
                                <div
                                    key="crmListLayout"
                                    className="wm-route-layout"
                                >
                                    
                                    <AdvancedForm />
                                </div>
                            </RouteLayout>
                        )
                    }}
                /> 
            </div>
        )
    }

    toAdvanced = (key) =>{
       this.routeTo(key);

    }

    //路由跳转
    routeTo=(type)=>{
        const {history,rememberStore} = this.props;
        const {changeRoute} = rememberStore;

        changeRoute(type);
        const {routeData} = rememberStore;
        history.push(routeData.path)
    
    }


    

}

export default Remember;